<template>
	<view class="tabs-box df-between">
		<view class="item" v-for="(item, index) in data" :key="index">
			<text :class="{active: item.actived}"
				@click="choseItem(item)">{{item[fileName.label]}}</text>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		defineProps,
		defineEmits,
		toRefs
	} from 'vue'
	const params = {
		label: 'label',
		value: 'value',
		id: 'id'
	}
	const props = defineProps({
		list: {
			type: Array,
			default: () => []
		},
		fileName: {
			type: Object,
			default: () => ({
				label: 'label',
				value: 'value',
			})
		},
		activeKey: {
			type: [String, Number],
			default: 1
		}
	})
	const {
		list,
		fileName,
		activeKey
	} = toRefs(props)
	const emits = defineEmits(['updateHandel'])
	const data = ref(list.value)
	const init = () => {
		data.value.forEach((item, index) => {
			item.actived = index == 0 ? true : false
		})
	}
	const choseItem = (item) => {
		data.value.forEach(key => key.actived = false)
		item.actived = true
		emits('updateHandel', item[fileName.value.value])
	}
</script>

<style lang="scss" scoped>
	.tabs-box {
		padding: 0 30rpx;
		font-size: 28rpx;
		margin: 30rpx 0;
		color: #666666;
		cursor: pointer;
		.active {
			color: #427DFF;
			font-size: 32rpx;
			position: relative;
			&::after{
				content: '';
				width: 45%;
				height: 4rpx;
				background-color: #427DFF;
				position: absolute;
				left: 50%;
				bottom: -12rpx;
				border-radius: 2rpx;
				transform: translateX(-50%);
			}
		}
	}
</style>